<template>
  <ElRow>
    <ElCol :span="2" :offset="22">
      <ElButton style="margin-bottom: 18px" type="primary" @click="showAddVideoModel"
        >添加</ElButton
      >
    </ElCol>
  </ElRow>
  <Table
    v-model:pageSize="pageSize"
    v-model:currentPage="currentPage"
    :columns="allSchemas.tableColumns"
    :data="dataList"
    :pagination="{
      total: total
    }"
    showAction
    @register="tableRegister"
    @refresh="refresh"
  />

  <AddScheduleModel ref="addScheduleModel" @on-search="getList" />
  <EditScheduleModel ref="editScheduleModel" @on-search="getList" />
</template>
<script setup lang="tsx">
import { Search } from '@/components/Search'
import EditVideoModel from '@/views/StudyPlan/videoPlan/components/editVideoTypeModel.vue'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useTable } from '@/hooks/web/useTable'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
import {
  delBatchPlStudyPlanVideoType,
  delBatchPlStudyScheduleApi,
  getPlStudyPlanVideoTypePageListApi,
  getPlStudySchedulePageListApi
} from '@/api/studyPlan/video'
import { ref, defineProps, reactive, onMounted, nextTick, unref } from 'vue'

import AddVideoTabTableModel from '@/views/StudyPlan/videoPlan/components/addVideoTabTableModel.vue'
import VideoDetailDrawer from '@/views/StudyPlan/videoPlan/components/videoDetailDrawer.vue'
import {
  ElDialog,
  ElDescriptions,
  ElDescriptionsItem,
  ElTag,
  ElTabs,
  ElTable,
  ElTableColumn,
  ElCol,
  ElRow,
  ElTabPane,
  ElButton
} from 'element-plus'
import EditScheduleModel from '@/views/StudyPlan/videoPlan/components/editScheduleModel.vue'
import AddScheduleModel from '@/views/StudyPlan/videoPlan/components/addScheduleModel.vue'
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const res = await getPlStudySchedulePageListApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      studyPlanId: props.studyPlan.id,
      type: 1,
      ...searchParams.value
    })
    return {
      list: res.data.records,
      total: res.data.total
    }
  },
  fetchDelApi: async () => {
    let boo = false
    const a = {}
    a['idsList'] = ids.value
    const res = await delBatchPlStudyScheduleApi(a)
    if (res.code == '00000') {
      boo = true
    }
    return boo
  }
})

const delLoading = ref(false)
const ids = ref<string[]>([])
const delData = async (row) => {
  console.log(row, 'row')
  const elTableExpose = await getElTableExpose()
  ids.value = row ? [row.id] : elTableExpose?.getSelectionRows().map((v) => v.id) || []
  delLoading.value = true
  await delList(unref(ids).length).finally(() => {
    delLoading.value = false
  })
}
const editScheduleModel = ref()
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList, setProps, refresh, getElTableExpose, delList } = tableMethods

const addScheduleModel = ref()
const showAddVideoModel = () => {
  addScheduleModel.value.isShowModel(props.studyPlan)
}
const props = defineProps({
  studyPlan: {
    type: Object,
    default: () => null
  }
})
const columns = reactive<CrudSchema[]>([
  {
    field: 'index',
    label: '序号',
    type: 'index',
    align: 'center',
    headerAlign: 'center',
    search: {
      hidden: true
    }
  },
  {
    field: 'startTime',
    label: '开始时间',
    align: 'center',
    headerAlign: 'center',
    search: {
      hidden: true
    }
  },
  {
    field: 'endTime',
    label: '结束时间',
    align: 'center',
    headerAlign: 'center',
    search: {
      hidden: true
    }
  },
  {
    field: 'status',
    label: '状态',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center',
    slots: {
      default: (data: any) => {
        return (
          <ElTag type={data.row.status === 0 ? 'danger' : 'success'}>
            {data.row.status === 0 ? '禁用' : '启用'}
          </ElTag>
        )
      }
    }
  },
  {
    field: 'action',
    align: 'center',
    width: '200px',
    headerAlign: 'center',
    label: '操作',
    search: { hidden: true },
    slots: {
      default: (data: any) => {
        return (
          <>
            <ElButton
              type="primary"
              style="padding:0px"
              text
              onClick={() => showEditModel(data.row)}
            >
              编辑
            </ElButton>
            <ElButton type="danger" style="padding:0px" text onClick={() => delData(data.row)}>
              删除
            </ElButton>
          </>
        )
      }
    }
  }
])

const showEditModel = (row) => {
  editScheduleModel.value.isShowModel(row)
}

const searchParams = ref({})
const { allSchemas } = useCrudSchemas(columns)
const setSearchParams = (params: any) => {
  params.name = params.name
  searchParams.value = params
  getList()
}
</script>
